<template>
  <div class="stepGraph" :id="id" style="margin-top: -30px"></div>
</template>
<script>
  export default {
    name:"stepGraph",
    props:['graphData','id'],
    data(){
      return{
        option:{
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name:'Step Start',
              type:'line',
              step: 'start',
              data:[120, 132, 101, 134, 90, 230, 210]
            },
            {
              name:'Step Middle',
              type:'line',
              step: 'middle',
              data:[220, 282, 201, 234, 290, 430, 410]
            },
            {
              name:'Step End',
              type:'line',
              step: 'end',
              data:[450, 432, 401, 454, 590, 530, 510]
            }
          ]
        }
      }
    },
    methods:{
      initGraph(){
        let dom = document.getElementById(this.id);
        let graph = this.$echarts.init(dom);
        graph.setOption(this.option, true);
        $(window).resize(function () {
          graph.resize();
        });
      }
    },
    watch:{
      graphData(){
        this.initGraph();
      }
    }
  }
</script>
<style scoped>
  .stepGraph {
    height: 200px;
    width: 200px;
  }
</style>

